<template>
  <div class="relative" style="width: 100%">
    <div class='title'>计划投入比率</div>
    <div class="absolute flexColumn labelBox">
      <div class="flex-align-center flex1">
        <span class="labelIcon bg-shallowBlue"></span>计划投入
      </div>
      <div class="flex-align-center flex1">
        <span class="labelIcon bg-yellow"></span>实际投入
      </div>
    </div>
    <div ref='charDom' style='width:100%;height:250px;'></div>
    <div class="absolute roundBox">
      <div class="innerRoundBox absolute flex-center flexColumn">
        <span class="font24">{{ parseInt(percent) }}%</span>
        <span class="font14">{{ percent > 100 ? '超出计划' : '未超计划'}}</span>
      </div>
    </div>
    <div class='preWrap'>
      <div class='preRight'>
        <div class='dataA'>
          <div class='dataAInner' :style="{width: costData.realIncome / (costData.planIncome + costData.realIncome) * 100 + '%'}"></div>
        </div>
        <div class='dataB'>
          <div class='dataAInner' :style="{width: costData.planIncome / (costData.planIncome + costData.realIncome) * 100 + '%'}"></div>
        </div>
      </div>
    </div>

    <div class='bottomInfo'>
      <span class='info1'>计划投入：</span>
      <span class='info2'>{{ util.twoFixed(costData.planIncome) }}元</span>
      <span class='info3'>实际投入：</span>
      <span class='info4'>{{ util.twoFixed(costData.realIncome) }}元</span>
    </div>
  </div>
</template>
<script>
const echarts = require('echarts')

export default {
  props: ['dataList'],
  components: {},
  data(){
    return {
      currentNav: '',
      myChart: null,
      costData: {
        planIncome: 0,
        realIncome: 0
      },
      percent: 0
    }
  },
  watch: {
    dataList () {
      this.getOption()
    }
  },
  mounted(){
    this.myChart = echarts.init(this.$refs.charDom)
    // if (!this.dataList.abs.length) return
    this.getOption()
  },
  methods: {
    getOption () {
      this.getData()
      let data = this.costData
      this.myChart.setOption({
        tooltip: {trigger: 'item'},
        series: [{
            name: '计划收入',
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            radius: '80%',
            pointer: {
                show: false
            },
            progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false,
                itemStyle: {
                  color: '#39d7e4'
                }
            },
            axisLine: {
                lineStyle: {
                    width: 7,
                    color: [[1, '#0c2f74']]
                }
            },
            splitLine: {
                show: false,
                distance: 0,
                length: 10
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false,
                distance: 50
            },
            data: [
            {
                value: data.planIncome / (data.planIncome + data.realIncome) * 100,
                name: 'Perfect',
                title: {
                    show: false
                },
                detail: {
                    show: false
                }
            }
            ],
            title: {
                fontSize: 14
            },
            detail: {
                width: 50,
                height: 14,
                fontSize: 14,
                color: 'auto',
                borderColor: 'auto',
                borderRadius: 20,
                borderWidth: 1,
                formatter: '{value}%'
            }
        },
        {
            type: 'gauge',
            name: '实际收入',
            startAngle: 90,
            endAngle: -270,
            radius: '70%',
            pointer: {
                show: false
            },
            progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false,
                itemStyle: {
                    color: '#fe7d00'
                }
            },
            axisLine: {
                lineStyle: {
                    width: 7,
                    color: [[1, '#0c2f74']]
                }
            },
            splitLine: {
                show: false,
                distance: 0,
                length: 10
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false,
                distance: 50
            },
            data: [
                {
                    value: data.realIncome / (data.planIncome + data.realIncome) * 100,
                    name: 'Perfect',
                    detail: {
                        show: false
                    },
                    title: {
                        show: false
                    }
                }
            ]
        }]
      })
    },
    getData () {
      if (!this.dataList.aps) return
      let temp = {
        planIncome: 0,
        realIncome: 0
      }
      this.dataList.aps.forEach(item => {
        temp.planIncome += item
      })
      this.dataList.income.forEach(item => {
        temp.realIncome += item
      })
      this.percent = this.util.twoFixed((temp.realIncome / temp.planIncome)) * 100
      this.costData = temp
    }
  }
}
</script>

<style scoped lang='less'>
.title {
  font-size: 24px;
  font-weight: 400;
  color: #E9F2F9;
  text-align: center;
}
.labelBox{
  margin: 0;
  right: 20px;
  width: 20% !important;
  height: 50px;
  top: 50px;
  box-shadow: unset !important;
  color: white;
  .labelIcon{
    height: 16px;
    width: 16px;
    margin-right: 10px;
  }
}
.roundBox{
  width: 130px !important;
  height: 130px;
  border-radius: 175px;
  background: linear-gradient(to bottom, #32c9fb 0%, #5a85fb 100%);;
  top: 96px;
  left: 163px;
  .innerRoundBox{
    color: white;
    width: 114px;
    height: 114px;
    border: 4px solid #fff;
    border-radius: 50%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}
.bottomInfo {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 400;

  .info1 {
    color: #E9F2F9;
  }

  .info2 {
    color: #18B2A3;
  }

  .info3 {
    margin-left: 30px;
    color: #E9F2F9;
  }

  .info4 {
    color: #18B2A3;
  }
}


.preWrap {
  display: flex;
  align-items: center;
  padding: 10px 50px;

  .preL {
    color: white;
    font-size: 20px;
  }

  .preRight {
    flex: 1;
    margin-left: 10px;

    .dataA {
      width: 100%;
      position: relative;
      height: 20px;
      background-color: #0c2f74;
      border-radius: 20px;

      .dataAInner {
        position: absolute;
        background-color: #FE7D00;
        height: 100%;
        border-radius: 20px;

      }
    }


    .dataB {
      margin-top: 8px;
      width: 100%;
      position: relative;
      height: 20px;
      background-color: #0c2f74;
      border-radius: 20px;

      .dataAInner {
        position: absolute;
        background-color: #30CCFB;
        height: 100%;
        border-radius: 20px;
      }
    }
  }


}

</style>
